<template>
  <div>
    <div class="header_box">
      <div class="header">
        <div class="h_left">
          <i class="el-icon-arrow-left"></i>
        </div>
        <div class="h_center">
          <div class="c_Inside">
            <input
              type="text"
              placeholder="进口生鲜今日三折起售"
              class="input-with-select"
            />
            <router-link :to="{ name: 'goosType' }">
              <i class="el-icon-search"></i>
            </router-link>
          </div>
        </div>
        <div class="h_right">
          <i class="el-icon-chat-dot-square"></i>
        </div>
      </div>
    </div>
    <div class="line_b"></div>
    <!-- 列表 -->
    <div class="type_list">
      <!-- 左侧 -->
      <div class="type_list_L">
        <ul>
          <li class="on"><a href="#">热门推荐</a></li>
          <li><a href="#">热门推荐</a></li>
          <li><a href="#">热门推荐</a></li>
          <li><a href="#">热门推荐</a></li>
       <li><a href="#">热门推荐</a></li>
       <li><a href="#">热门推荐</a></li>
       <li><a href="#">热门推荐</a></li>
        <li><a href="#">热门推荐</a></li>
         <li><a href="#">热门推荐</a></li>
          <li><a href="#">热门推荐</a></li>
           <li><a href="#">热门推荐</a></li>
            <li><a href="#">热门推荐</a></li>
             <li><a href="#">热门推荐</a></li>
        </ul>
      </div>
      <!-- 右侧 -->
      <div class="type_list_R">
        <div class="box_content">
          <div class="box_banner">
            <img
              style="width: 100%"
              src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/1.jpg"
              alt=""
            />
          </div>
          <!-- 分类内容 -->
          <div class="item">
            <a href="#">
              <div class="title">
                <p>热门分类</p>
              </div>
            </a>
            <div class="item_list">
              <ul>
                <li>
                  <router-link :to="{ name: 'goosType' }">
                      <img src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/3.jpg" alt="">
                      <p>毛呢外套</p>
                  </router-link>
                </li>
                <li>
                  <router-link :to="{ name: 'goosType' }">
                      <img src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/2.jpg" alt="">
                      <p>毛呢外套</p>
                  </router-link>
                </li>
                <li>
                  <router-link :to="{ name: 'goosType' }">
                      <img src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/4.jpg" alt="">
                      <p>毛呢外套</p>
                  </router-link>
                </li>
              </ul>
            </div>
          </div>
          <div class="item">
            <a href="#">
              <div class="title">
                <p>热门分类</p>
              </div>
            </a>
            <div class="item_list">
              <ul>
                <li>
                  <router-link :to="{ name: 'goosType' }">
                      <img src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/3.jpg" alt="">
                      <p>毛呢外套</p>
                  </router-link>
                </li>
                <li>
                  <router-link :to="{ name: 'goosType' }">
                      <img src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/2.jpg" alt="">
                      <p>毛呢外套</p>
                  </router-link>
                </li>
                <li>
                  <router-link :to="{ name: 'goosType' }">
                      <img src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/4.jpg" alt="">
                      <p>毛呢外套</p>
                  </router-link>
                </li>
              </ul>
            </div>
          </div>
          <div class="item">
            <a href="#">
              <div class="title">
                <p>热门分类</p>
              </div>
            </a>
            <div class="item_list">
              <ul>
                <li>
                  <router-link :to="{ name: 'goosType' }">
                      <img src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/3.jpg" alt="">
                      <p>毛呢外套</p>
                  </router-link>
                </li>
                <li>
                  <router-link :to="{ name: 'goosType' }">
                      <img src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/2.jpg" alt="">
                      <p>毛呢外套</p>
                  </router-link>
                </li>
                <li>
                  <router-link :to="{ name: 'goosType' }">
                      <img src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/4.jpg" alt="">
                      <p>毛呢外套</p>
                  </router-link>
                </li>
              </ul>
            </div>
          </div>
          <div class="item">
            <a href="#">
              <div class="title">
                <p>热门分类</p>
              </div>
            </a>
            <div class="item_list">
              <ul>
                <li>
                  <router-link :to="{ name: 'goosType' }">
                      <img src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/3.jpg" alt="">
                      <p>毛呢外套</p>
                  </router-link>
                </li>
                <li>
                  <router-link :to="{ name: 'goosType' }">
                      <img src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/2.jpg" alt="">
                      <p>毛呢外套</p>
                  </router-link>
                </li>
                <li>
                  <router-link :to="{ name: 'goosType' }">
                      <img src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/4.jpg" alt="">
                      <p>毛呢外套</p>
                  </router-link>
                </li>
              </ul>
            </div>
          </div>
          <div class="item">
            <a href="#">
              <div class="title">
                <p>热门分类</p>
              </div>
            </a>
            <div class="item_list">
              <ul>
                <li>
                  <router-link :to="{ name: 'goosType' }">
                      <img src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/3.jpg" alt="">
                      <p>毛呢外套</p>
                  </router-link>
                </li>
                <li>
                  <router-link :to="{ name: 'goosType' }">
                      <img src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/2.jpg" alt="">
                      <p>毛呢外套</p>
                  </router-link>
                </li>
                <li>
                  <router-link :to="{ name: 'goosType' }">
                      <img src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/4.jpg" alt="">
                      <p>毛呢外套</p>
                  </router-link>
                </li>
              </ul>
            </div>
          </div>
           <div class="item">
            <a href="#">
              <div class="title">
                <p>热门分类</p>
              </div>
            </a>
            <div class="item_list">
              <ul>
                <li>
                  <router-link :to="{ name: 'goosType' }">
                      <img src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/3.jpg" alt="">
                      <p>毛呢外套</p>
                  </router-link>
                </li>
                <li>
                  <router-link :to="{ name: 'goosType' }">
                      <img src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/2.jpg" alt="">
                      <p>毛呢外套</p>
                  </router-link>
                </li>
                <li>
                  <router-link :to="{ name: 'goosType' }">
                      <img src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/4.jpg" alt="">
                      <p>毛呢外套</p>
                  </router-link>
                </li>
              </ul>
            </div>
          </div>
           <div class="item">
            <a href="#">
              <div class="title">
                <p>热门分类</p>
              </div>
            </a>
            <div class="item_list">
              <ul>
                <li>
                  <router-link :to="{ name: 'goosType' }">
                      <img src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/3.jpg" alt="">
                      <p>毛呢外套</p>
                  </router-link>
                </li>
                <li>
                  <router-link :to="{ name: 'goosType' }">
                      <img src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/2.jpg" alt="">
                      <p>毛呢外套</p>
                  </router-link>
                </li>
                <li>
                  <router-link :to="{ name: 'goosType' }">
                      <img src="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/4.jpg" alt="">
                      <p>毛呢外套</p>
                  </router-link>
                </li>
              </ul>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {};
</script>
<style lang="less" scoped>
.header_box {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;

  .header {
    padding: 0.5rem 0;
    height: 1.8rem;
    position: fixed;
    width: 100%;
    max-width: 640px;
    top: 0;
    background: #fff;
    z-index: 9999;
    border-bottom: 1px solid #eee;

    .h_left {
      position: absolute;
      left: 0;
      top: 0;
      height: 1.8rem;
      padding-left: 0.6rem;
      i {
        display: block;
        height: 1.1rem;
        padding-top: 0.7rem;
        font-size: 1.3rem;
      }
    }
    .h_center {
      width: 75%;
      margin: 0 auto;
      height: 1.8rem;
      line-height: 1.8rem;
      text-align: center;
      background: #f7f7f7;
      border: 1px solid #f7f7f7;
      box-sizing: border-box;
      border-radius: 4px;
      .c_Inside {
        display: block;
        width: 100%;
        height: 100%;
        .input-with-select {
          float: left;
          width: 80%;
          border: 0;
          outline: none;
          height: 1.8rem;
          line-height: 1.8rem;
          color: #999;
          font-size: 0.8rem;
          background: none;
          padding-left: 0.3rem;
        }
        i {
          float: right;
          height: 1.8rem;
          font-size: 1.2rem;
          padding-top: 0.2rem;
          padding-left: -0.7rem;
          padding-right: 0.4rem;
        }
      }
    }

    .h_right {
      position: absolute;
      right: 0;
      top: 0;
      height: 1.8rem;
      padding-right: 0.6rem;
      i {
        font-size: 1.4rem;
        padding-top: 0.7rem;
      }
    }
  }
}
.line_b {
  width: 100%;
  height: 2.85rem;
  overflow: hidden;
}
.type_list {
  width: 100%;
  height: 690px;
  overflow: hidden;
  .type_list_L {
    float: left;
    width: 25%;
    height: 100%;
    overflow: auto;
    background: #f7f7f7;
    ul {
      overflow: scroll;
      li {
        width: 100%;
        height: 3rem;
        overflow: hidden;
        border-bottom: 1px solid #eee;
        border-right: 1px solid #eee;
        box-sizing: border-box;
        a {
          display: block;
          color: #333;
          font-size: 0.9rem;
          text-align: center;
          height: 3rem;
          line-height: 3rem;
        }
      }
      .on {
        background: #fff;
        border-right: 0;
        a {
          color: #ff2150;
        }
      }
    }
  }
  .type_list_R {
   float: left;
    width: 75%;
    height: 100%;
    background: #fff;
    overflow: auto;
    .box_content {
      padding: 0.6rem;
      overflow: scroll;
    }
    .box_banner {
      width: 100%;
    }
    .title {
      padding-top: 1rem;
      p {
        font-size: 0.85rem;
        color: #ff2150;
        height: 2rem;
        line-height: 2rem;
      }
    }
    .item_list {
      width: 100%;
      margin-top: 0.6rem;
      ul {
        overflow: hidden;
        li {
          float: left;
          width: 31%;
          text-align: center;
          margin-right: 2%;
          overflow: hidden;
          margin-bottom: 0.6rem;
          a {
            display: block;
            height: 100%;
            width: 100%;
          }
          img {
            width: 4.5rem;
          }
          p {
            text-align: center;
            color: #333;
            font-size: 0.75rem;
            height: 1.2rem;
            line-height: 1.2rem;
            overflow: hidden;
            white-space: nowrap;
          }
        }
      }
    }
  }
}
</style>